<template>
  <div class="shouli">
    <div class="flex JustifyContentSA colorF font_s30 textC" style="padding: 0.25rem 0 0.625rem;color: rgb(255, 220, 117);">
      <p>
        评估人员总数:<span style="padding-left: 1rem;">{{dataNum.pgryzs}}人</span>
      </p>
      <p>
        A类:<span style="padding-left: 1rem;">{{dataNum.apgryzs}}人</span>
      </p>
      <p>
        B类:<span style="padding-left: 1rem;">{{dataNum.bpgryzs}}人</span>
      </p>
    </div>
    <div class="flexC" style="padding: 0 4rem;">
      <ul class="Inv_ula flex AlignItemsC JustifyContentC colorF font_s22 textC">
        <li class="flex1">序号</li>
        <li class="flex4">机构名称</li>
        <li class="flex2">机构类别</li>
        <li class="flex4">机构地址</li>
        <li class="flex2">负责人</li>
        <li class="flex1">联系人</li>
        <li class="flex2">联系电话</li>
      </ul>
      <div style="height: 54vh;" class="superviseList font_s20">
        <ul v-for="(item, index) in dataList" class="Inv_ulb flex colorF textC AlignItemsC" :key="'list' + index">
          <li class="flex1">{{ index + 1 }}</li>
          <li class="flex4">{{ item.jgmc }}</li>
          <li class="flex2">{{ item.jglb }}</li>
          <li class="flex4">{{ item.jgdz }}</li>
          <li class="flex2">{{ item.fzr }}</li>
          <li class="flex1">{{ item.lxr }}</li>
          <li class="flex2">{{ item.lxrdh }}</li>
        </ul>
      </div>
    </div>
    <!-- 条件查询没有符合条件的数据时显示提示信息 -->
    <div class="messageBoxStyle FontWeightB font_s28" v-show="showErrorMessage">
      <p>没有符合条件的数据</p>
    </div>
    <!-- 数据加载中的提示信息 -->
    <div class="messageBoxStyle FontWeightB font_s28" v-show="showWaitingMessage">
      <p>数据加载中，请等待...</p>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataList: [],
      dataNum: [],
      // 无符合筛选条件显示内容
      showErrorMessage: false,
      showWaitingMessage: false
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      this.dataList = []
      if (this.dataList.length === 0) {
        this.showWaitingMessage = true
      }
      // 请求列表数据
      this.$http.get(this.$api.PgjgList.pgjgList, true).then(result => {
        this.dataList = result.data.result
        if (this.dataList.length === 0) {
          this.showErrorMessage = true
          this.showWaitingMessage = false
        } else {
          this.showWaitingMessage = false
        }
      })
      this.$http.get(this.$api.Pgjgrytj.pgjgrytj, true).then(result => {
        this.dataNum = result.data.result[0]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.shouli {
  width: 100%;
  height: 100%;
  .Inv_ul {
    width: 89.375rem;
    height: 4.375rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    margin: 1.285rem auto 0.825rem;
  }
  .Inv_ula {
    width: 100%;
    font-weight: bold;
    border: 1px solid rgba(0, 255, 255, 1);
    padding: 0.625rem 0;
    box-sizing: border-box;
  }
  .Inv_ulb {
    font-weight: bold;
    width: 100%;
    li {
      padding: 0.625rem 0;
      word-wrap: break-word;
      word-break: break-all;
    }
  }
  .superviseList {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .superviseList::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 0.6);
  }
  .superviseList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 1);
  }
  .Inv_ulb:nth-child(even) {
    background: rgba(0, 255, 255, 0.1);
  }
  .category {
    color: #30dfff;
  }
}
</style>
